<div [formGroup]="fieldForm">
    <div class="form-group row">
        <label class="col-3 col-form-label">{{ "schemas.fieldTypes.assets.count" | sqxTranslate }}</label>
        <div class="col-9">
            <div class="row g-0">
                <div class="col">
                    <input
                        class="form-control"
                        formControlName="minItems"
                        placeholder="{{ 'schemas.fieldTypes.assets.countMin' | sqxTranslate }}"
                        type="number" />
                </div>

                <div class="col-auto"><label class="col-form-label minmax">-</label></div>

                <div class="col">
                    <input
                        class="form-control"
                        formControlName="maxItems"
                        placeholder="{{ 'schemas.fieldTypes.assets.countMax' | sqxTranslate }}"
                        type="number" />
                </div>

                <div class="col col-label"></div>
            </div>
        </div>
    </div>

    <div class="form-group row">
        <label class="col-3 col-form-label">{{ "schemas.fieldTypes.assets.size" | sqxTranslate }}</label>
        <div class="col-9">
            <div class="row g-0">
                <div class="col">
                    <input
                        class="form-control"
                        formControlName="minSize"
                        placeholder="{{ 'schemas.fieldTypes.assets.sizeMin' | sqxTranslate }}"
                        type="number" />
                </div>

                <div class="col-auto"><label class="col-form-label minmax">-</label></div>

                <div class="col">
                    <input
                        class="form-control"
                        formControlName="maxSize"
                        placeholder="{{ 'schemas.fieldTypes.assets.sizeMax' | sqxTranslate }}"
                        type="number" />
                </div>

                <div class="col col-label">
                    <label class="col-form-label">{{ "common.bytes" | sqxTranslate }}</label>
                </div>
            </div>
        </div>
    </div>

    <hr />

    <div class="form-group row">
        <label class="col-3 col-form-label">{{ "schemas.fieldTypes.assets.expectedType" | sqxTranslate }}</label>
        <div class="col-9">
            <div class="row g-0">
                <div class="col">
                    <select class="form-select" formControlName="expectedType">
                        <option></option>

                        <option ngValue="Image">Image</option>

                        <option ngValue="Audio">Audio</option>

                        <option ngValue="Video">Video</option>

                        <option ngValue="Unknown">Unknown</option>
                    </select>
                </div>

                <div class="col col-label"></div>
            </div>
        </div>
    </div>

    <div class="form-group row">
        <label class="col-3 col-form-label">{{ "common.width" | sqxTranslate }}</label>
        <div class="col-9">
            <div class="row g-0">
                <div class="col"><input class="form-control" formControlName="minWidth" type="number" /></div>

                <div class="col-auto"><label class="col-form-label minmax">-</label></div>

                <div class="col"><input class="form-control" formControlName="maxWidth" type="number" /></div>

                <div class="col col-label"><label class="col-form-label">px</label></div>
            </div>
        </div>
    </div>

    <div class="form-group row">
        <label class="col-3 col-form-label">{{ "common.height" | sqxTranslate }}</label>
        <div class="col-9">
            <div class="row g-0">
                <div class="col"><input class="form-control" formControlName="minHeight" type="number" /></div>

                <div class="col-auto"><label class="col-form-label minmax">-</label></div>

                <div class="col"><input class="form-control" formControlName="maxHeight" type="number" /></div>

                <div class="col col-label"><label class="col-form-label">px</label></div>
            </div>
        </div>
    </div>

    <div class="form-group row">
        <label class="col-3 col-form-label">{{ "common.aspectRatio" | sqxTranslate }}</label>
        <div class="col-9">
            <div class="row g-0">
                <div class="col"><input class="form-control" formControlName="aspectWidth" type="number" /></div>

                <div class="col-auto"><label class="col-form-label minmax">:</label></div>

                <div class="col"><input class="form-control" formControlName="aspectHeight" type="number" /></div>

                <div class="col col-label"><label class="col-form-label">px</label></div>
            </div>
        </div>
    </div>

    <hr />

    <div class="form-group row">
        <div class="col-9 offset-3">
            <div class="form-check">
                <input class="form-check-input" id="{{ field.fieldId }}_fieldAllowDuplicates" formControlName="allowDuplicates" type="checkbox" />
                <label class="form-check-label" for="{{ field.fieldId }}_fieldAllowDuplicates">
                    {{ "schemas.fieldTypes.assets.allowDuplicates" | sqxTranslate }}
                </label>
            </div>
        </div>
    </div>

    <div class="form-group row">
        <label class="col-3 col-form-label">{{ "schemas.fieldTypes.assets.fileExtensions" | sqxTranslate }}</label>
        <div class="col-9"><sqx-tag-editor formControlName="allowedExtensions" /></div>
    </div>

    <div class="form-group row">
        <label class="col-3 col-form-label">{{ "schemas.field.defaultValue" | sqxTranslate }}</label>
        <div class="col-9"><sqx-tag-editor formControlName="defaultValue" /></div>
    </div>

    @if (isLocalizable) {
        <div class="form-group row">
            <label class="col-3 col-form-label">{{ "schemas.field.defaultValues" | sqxTranslate }}</label>
            <div class="col-9">
                <sqx-localized-input formControlName="defaultValues" [languages]="languages" type="tags" />
                <sqx-form-hint> {{ "schemas.field.defaultValuesHint" | sqxTranslate }} </sqx-form-hint>
            </div>
        </div>
    }
</div>
